<template>
    <div class="product-container">
        <el-row>
            <el-col :span="24">
                <normal-filter :filterProps="filterProps" />
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addContent">添加名单</el-button>
            <el-button type="success" icon="el-icon-upload" @click="showImportModal = true">导入名单</el-button>
            <el-button type="primary" @click="onShowDistribution">批量划转</el-button>
        </el-row>
        <el-row class="table-container">
            <Table
                :columnProps="columnProps"
                :multiSelection="true"
                :tableData="tableData"
                :showHandle="true"
                :pagination="pagination"
                @currentPage="goCurrent"
                @sizeChange="sizeChange"
                @delete="del"
                @modify="modify"
                @selectionChange="handleSelectionChange"
            >
                <template slot-scope="scopes" slot="dealOrder">
                    <div class="send-btn">
                        <p v-if="scopes.scope.row.validOrderList.length > 0">
                            <el-link type="primary" @click="toOrder(scopes.scope.row.phone,'valid')">生效中：{{ scopes.scope.row.validOrderList.length }}</el-link>
                        </p>
                        <p v-if="scopes.scope.row.expiredOrderList.length > 0">
                            <el-link type="danger" @click="toOrder(scopes.scope.row.phone,'expired')"> 已过期：{{ scopes.scope.row.expiredOrderList.length }}</el-link>
                        </p>
                        <p v-if="scopes.scope.row.validOrderList.length == 0 && scopes.scope.row.expiredOrderList.length == 0">暂无订单</p>
                    </div>
                </template>
                <template slot-scope="scopes" slot="link">
                    <span style="margin-left: 20px">
                        <el-link @click="onDistribute(scopes.scope.row)" type="primary" :underline="false"> 划转 </el-link>
                    </span>
                </template>
            </Table>
        </el-row>
        <el-dialog title="导入文件数据" :visible.sync="showImportModal">
            <el-upload action="" accept=".xls,.xlsx" class="upload-demo" ref="upload" :limit="1" :auto-upload="false" :on-change="fileChange" :on-remove="fileRemove">
                <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="file" :loading="loading" type="primary" @click="importTplData">{{ loading ? "导入中" : "导入数据" }}</el-button>
            </span>
        </el-dialog>
        <staff-modal v-if="showDistribution" :visible="showDistribution" :customerBaseList="selectedRows" :callback="distibuteSuccess" @close="onClose"></staff-modal>
    </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList, delItem, importData } from "@/api/customerBase";
import { pagination, page } from "@/utils/enumConfig";
import { Message } from "element-ui";
import staffModal from "./components/staffModal";

export default {
    name: "customerBase",
    components: {
        normalFilter,
        Table,
        staffModal,
    },
    data() {
        const filterProps = {
            filterItems: [
                {
                    type: "input",
                    id: "name",
                    title: "姓名",
                    placeholder: "请输入",
                },
                {
                    type: "input",
                    id: "phone",
                    title: "手机号",
                    placeholder: "请输入",
                },
                {
                    type: "input",
                    id: "idcardNo",
                    title: "身份证",
                    placeholder: "请输入",
                },
                {
                    type: "select",
                    id: "addWxWork",
                    title: "添加企微",
                    placeholder: "请选择",
                    width: 180,
                    options: [
                        {
                            title: "是",
                            key: "1",
                            value: 1,
                        },
                        {
                            title: "否",
                            key: "0",
                            value: 0,
                        },
                    ],
                },
                {
                    type: "input",
                    id: "area",
                    title: "地区",
                    placeholder: "请输入",
                },
                {
                    type: "input",
                    id: "source",
                    title: "来源",
                    placeholder: "请输入",
                },
                {
                    type: "input",
                    id: "financeManager",
                    title: "理财经理",
                    placeholder: "请输入",
                },
            ],
            onFilterChange: (value) => {
                this.filterParam = value;
                this.getList({
                    ...value,
                    ...page,
                });
            },
        };
        const columnProps = [
            {
                width: "200px",
                title: "交易订单",
                dataIndex: "dealOrder",
                slot: "dealOrder",
                key: "dealOrder",
            },
            {
                title: "姓名",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "地区",
                dataIndex: "area",
                key: "area",
            },
            {
                title: "来源",
                dataIndex: "source",
                key: "source",
            },
            {
                title: "手机号",
                dataIndex: "phone",
                key: "phone",
            },
            {
                title: "身份证",
                dataIndex: "idcardNo",
                key: "idcardNo",
            },
            {
                title: "是否添加企微",
                dataIndex: "addWxWork",
                key: "addWxWork",
                render: (record) => {
                    return `<span>${!record.addWxWork ? "否" : "是"}</span>`;
                },
            },
            {
                title: "理财经理",
                dataIndex: "financeManager",
                key: "financeManager",
            },
            {
                width: "160px",
                title: "分配时间",
                dataIndex: "distributeTime",
                key: "distributeTime",
            },
        ];
        return {
            filterProps,
            columnProps,
            list: [],
            tableData: [],
            pagination: this.$_.cloneDeep(pagination),
            filterParam: null,
            showImportModal: false,
            showDistribution: false, //划转弹框显隐
            file: null,
            loading: false,
            delVisible: false,
            selectedRows: [], //选中名单库得行
        };
    },
    async created() {
        let { pageIndex } = this.pagination;
        let param = {
            current: pageIndex,
        };
        this.getList(param);
    },
    methods: {
        addContent() {
            this.$router.push("/customerBase/add");
        },
        goCurrent(currentIndex) {
            let { pageSize, pageIndex } = this.pagination;
            let param = {
                ...this.filterParam,
                current: currentIndex,
                size: pageSize,
            };
            this.getList(param);
        },
        sizeChange(size) {
            let param = {
                ...this.filterParam,
                current: 1,
                size,
            };
            this.$set(this.pagination, "pageSize", size);
            this.getList(param);
        },
        modify({ id }) {
            this.$router.push({ path: `/customerBase/update/${id}` });
        },
        onDistribute(row) {
            this.selectedRows = [row];
            this.onShowDistribution();
        },
        async del({ id }) {
            let res = await delItem({ id });
            if (res.code === 1) {
                this.$message.success("删除成功！");
                let { pageIndex } = this.pagination;
                this.getList({
                    ...this.filterParam,
                    current: 1,
                });
            }
        },
        async getList(param = { current: 1 }) {
            let { records, size, total, current } = await getList(param),
                page = this.pagination;
            this.pagination = {
                ...page,
                totalElements: total,
                pageIndex: current,
            };
            this.tableData = records;
        },
        fileChange(file) {
            this.file = file.raw;
        },
        fileRemove(file) {
            this.file = null;
        },
        async importTplData() {
            let _this = this;
            this.loading = true;
            let res = await importData({ file: this.file });
            if (res.code === 1) {
                //成功后清除file
                this.file = null;

                Message({
                    message: res.msg,
                    type: "success",
                    duration: 1 * 1000,
                });
                setTimeout(() => {
                    //清空已经上传的列表
                    this.$refs.upload.clearFiles();

                    _this.showImportModal = false;
                    _this.getList({
                        ..._this.filterParam,
                        current: 1,
                    });
                }, 1000);
            }
            this.loading = false;
        },
        //勾选表格
        handleSelectionChange(rows) {
            this.selectedRows = rows;
        },
        //关闭划转弹窗
        onClose(visible) {
            this.showDistribution = visible;
        },
        //批量划转弹窗显隐
        onShowDistribution() {
            if (this.selectedRows.length === 0) {
                this.$message.warning("请先选择待划转名单库!");
                return;
            }
            this.showDistribution = true;
        },
        distibuteSuccess() {
            this.showDistribution = false;
            this.getList();
        },
        toOrder(phone,type) {
            this.$router.push({
                path:'/order/index',
                query:{
                    phone,
                    type
                }
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.product-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    .table-container {
        margin-top: 20px;
    }
}
</style>
